<template>
    <div class="carousel">
        <div class="slick-track" :style="{ width: allWidth + 'px', opacity: 1, transform: `translateX(${nextWidth}px)` }">
            <div ref="page1" class="page">
                <div>
                    <div class="top-text">即可登录</div>
                    <div class="top-text">畅享自由<img src="../assets/imgs/chonglang.png" alt="" class=""></div>
                </div>
                <div class="content-box">
                    <div style="align-self: center;">
                        <input type="text" placeholder="邮箱账号" class="input" v-model="username">
                        <div class="bottom-text">前往注册</div>
                    </div>
                </div>
                <img src="../assets/imgs/next.png" alt="" class="usename-img" @click="handleGoNext('username')">
            </div>
            <div ref="page2" class="page">
                <div>
                    <div class="top-text"><img src="../assets/imgs/keys.png" alt="" class=""></div>
                    <div class="top-text">输入密码</div>
                </div>
                <div class="content-box">
                    <div style="align-self: center;">
                        <input type="text" placeholder="密码" class="input" name="password" v-model="password">
                        <div class="bottom-text">忘记密码?</div>
                    </div>
                    <transition-group class="loading1" tag="div">
                        <div class="loading1-box" v-if="show">
                            <div class="loading1-box-item" key="load">
                            </div>
                        </div>
                    </transition-group>
                </div>
                <img src="../assets/imgs/upper.png" alt="" class="usename-img-left" @click="handleGoUpper">
                <img src="../assets/imgs/next.png" alt="" class="usename-img" @click="handleGoNext('password')">
            </div>
        </div>
    </div>
</template>
<script>
import message from '../components/messages';
export default {
    data() {
        return {
            allWidth: 0,
            nextWidth: 0,
            username: '',
            password: '',
            show: false
        }
    },
    methods: {
        handleGoNext(type) {
            if (type === 'username') {
                if (!this.username)
                    message('请输入正确的邮箱')
                else this.nextWidth = -this.$refs.page1.offsetWidth
            } else {
                if (!this.password) message('密码必须大于3个字符')
                else {
                    this.show = true
                    const timer = setTimeout(() => {
                        clearTimeout(timer)
                        this.show = false
                    }, 500)
                    const timer2 = setTimeout(() => {
                        clearTimeout(timer2)
                        this.$router.push('/surf')
                    }, 700)
                }
            }
        },
        handleGoUpper() {
            this.nextWidth = 0

        }
    },
    mounted() {
        this.allWidth = this.$refs.page1.offsetWidth + this.$refs.page2.offsetWidth
    }
}
</script>

<style scoped>
.carousel {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.slick-track {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    transition: all 0.3S ease;
}

.page {
    position: relative;
    flex: 0 0 auto;
    width: 100vw;
    height: 100vh;
    padding: 3% 1.5%;
}

.page .usename-img {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: auto;
}

.page .usename-img-left {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: auto;
}

.page .top-text {
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-content: center;
}

.top-text img {
    width: 2rem;
    height: auto;
    object-fit: contain;
}

.page .content-box {
    height: 40%;
    display: flex;
    justify-content: center;
}

.content-box .input {
    display: table-cell;
    width: 100%;
    height: 2%;
    border: none;
    font-size: 2rem;
    text-align: center;
    outline: none;
}

.content-box .bottom-text {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.5rem;
    color: #ccc;
    cursor: pointer;
}

.loading1 {
    position: fixed;
    z-index: 999;
    bottom: 50%;
}

.loading1-box {
    padding: 0.8rem 2.2rem;
    border-radius: 0.5rem;
    background: #5c5b5b;
}

.loading1-box-item {
    width: 2rem;
    height: 2rem;
    border: 4px solid #5c5b5b;
    border-radius: 50%;
    border-left-color: #fff;
    border-top-color: #fff;
    animation: loading1 0.3s infinite linear;
}

@keyframes loading1 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.v-enter-active,
.v-leave-active {
    transition: all .2s ease-in;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
    transform: scale(0);
}
</style>